<script setup>
import { GetDeptPI } from '@/api/common/index'
import { Top, Bottom } from '@element-plus/icons-vue'
import { GetDeviceTypeAPI } from '@/api/device/equipment.js'
const { proxy } = getCurrentInstance()
const { device_status, device_type } = proxy.useDict(
  'device_status',
  'device_type'
)

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const deviceList = ref([])
// 表单ref
const ruleFormRef = ref(null)

// 车间选择数据
const treeData = ref([])
const deptData = ref([])

// 车间选择配置
const prop = ref({
  value: 'code',
  label: 'name',
})

// 部门选择配置
const deptProp = ref({
  value: 'id',
  label: 'label',
  children: 'children',
})

const tableSel = ref([])

// tabs
const activeName = ref('基本信息')

const ruleForm = reactive({
  deviceType: '', // 设备类型
  deviceName: '', // 设备名称
  deviceUnitType: '', // 设备型号
  factoryCode: '', // 出厂编码
  // totalPower: "", // 总功率
  factoryName: '', // 制造厂商
  factoryDate: '', // 出厂年月
  installationTime: '', // 安装时间
  streamTime: '', // 投产时间
  installationLocation: '', // 安装地点
  deviceDept: '', // 使用部门
  deviceStatus: '', // 设备状态
  deviceSort: '', // 展示顺序
  remark: '', // 备注
  fileImagePath: '', // 设备图片路径
  fileAttachmentPath: '', // 文件附件路径
  list: [
    {
      deviceAddedit: '',
      deviceUnit: ' ',
    },
  ],
})

// 选中的数据
const rows = ref([])

// 列表枚举
const column = ref([
  { label: '属性信息', prop: 'deviceAddedit' },
  { label: '单位', prop: 'deviceUnit' },
])

const rules = reactive({
  deviceType: [
    { required: true, message: '请选择设备类型', trigger: 'change' },
  ],
  deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
  deviceUnitType: [
    { required: true, message: '请选择设备型号', trigger: 'change' },
  ],
  installationLocation: [
    { required: true, message: '请输入安装地点', trigger: 'blur' },
  ],
  deviceDept: [{ required: true, message: '请选择部门', trigger: 'change' }],
  deviceStatus: [
    { required: true, message: '请选择设备状态', trigger: 'change' },
  ],
  deviceCode: [
    { required: true, message: '请填写设备编码', trigger: 'change' },
  ],
})

// 勾选列表数据时
const handleSelectionChange = ({ ids, row }) => {
  rows.value = row
}
handleSelectionChange({ ids: [], row: [] })

// 提交
const submit = async () => {
  const valid = await ruleFormRef.value.validate()
  if (!valid) return proxy.formMsg()
  return ruleForm
}

// 添加
const add = () => {
  ruleForm.list.push({
    deviceAddedit: '',
    deviceUnit: '',
  })
}
// 删除表格表单
const remove = () => {
  if (rows.value.length > 0) {
    rows.value.forEach((t) => ruleForm.list.splice(t.index, 1))
  } else {
    ruleForm.list.splice(ruleForm.list.length - 1, 1)
  }
  //   if (tableSel.value.length > 0) {
  //     tableSel.value.forEach(item => {
  //       const Find = ruleForm.list.findIndex(
  //         itemy => item.deviceAddedit == itemy.deviceAddedit && item.deviceUnit == itemy.deviceUnit
  //       )
  //       ruleForm.list.splice(Find, 1)
  //     })
  //   } else {
  //     ruleForm.list.splice(ruleForm.list.length - 1, 1)
  //   }
}

// 获取部门
const getDept = async () => {
  try {
    const res = await GetDeptPI()
    deptData.value = res.data
  } catch {
  } finally {
  }
}
/**
 * 设备下拉
 */
const getDeviceType = async () => {
  try {
    const res = await GetDeviceTypeAPI()
    deviceList.value = res.data
  } catch {
  } finally {
  }
}
getDeviceType()

getDept()
watch(
  () => props.data,
  () => {
    if (props.data?.id) {
      Object.keys(props.data).forEach(
        (keyItem) => (ruleForm[keyItem] = props.data[keyItem])
      )
    }
    // ruleForm.deviceDept = props.data.deviceDeptDict
  },
  {
    deep: true,
    immediate: true,
  }
)

defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <div>
      <el-radio-group v-model="activeName" style="margin-bottom: 10px">
        <el-radio-button label="基本信息">基本信息</el-radio-button>
      </el-radio-group>
      <!-- 基本信息 -->
      <div class="info">
        <div class="left">
          <el-form
            ref="ruleFormRef"
            inline
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            status-icon
          >
            <el-form-item label="设备名称" prop="deviceName">
              <el-input
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.deviceName"
                placeholder="请填写设备名称"
              />
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <p-select
                :option="deviceList"
                :disabled="props.disabled"
                v-model="ruleForm.deviceType"
                placeholder="请选择设备类型"
              />
            </el-form-item>
            <el-form-item label="设备型号" prop="deviceUnitType">
              <el-input
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.deviceUnitType"
                placeholder="请填写设备型号"
              />
            </el-form-item>
            <el-form-item label="设备状态" prop="deviceStatus">
              <p-select
                :option="device_status"
                :disabled="props.disabled"
                v-model="ruleForm.deviceStatus"
                placeholder="请选择设备状态"
              />
            </el-form-item>

            <el-form-item label="设备编码" prop="deviceCode">
              <el-input
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.deviceCode"
                placeholder="请填写设备型号"
              />
            </el-form-item>
            <!-- <el-form-item label="总功率" prop="totalPower">
              <el-input
                type="number"
                oninput="if(value<=0)value=''"
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.totalPower"
                placeholder="请填写总功率"
              />
            </el-form-item> -->
            <el-form-item label="出厂年月" prop="factoryDate">
              <el-date-picker
                clearable
                :disabled="props.disabled"
                v-model="ruleForm.factoryDate"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择出厂年月"
              />
            </el-form-item>
            <el-form-item label="制造厂商" prop="factoryName">
              <el-input
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.factoryName"
                placeholder="请填写制造厂商"
              />
            </el-form-item>
            <el-form-item label="出厂编码" prop="factoryCode">
              <el-input
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.factoryCode"
                placeholder="请填写出厂编码"
              />
            </el-form-item>
            <el-form-item label="设备价格">
              <el-input-number
                :disabled="props.disabled"
                :min="0"
                clearable
                v-model="ruleForm.deviceCost"
                placeholder="请填写设备价格"
              />
            </el-form-item>
            <el-form-item label="残值">
              <el-input-number
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.deviceSalvage"
                placeholder="请填写残值"
              />
            </el-form-item>
            <el-form-item label="安装时间" prop="installationTime">
              <el-date-picker
                clearable
                :disabled="props.disabled"
                v-model="ruleForm.installationTime"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择安装时间"
              />
            </el-form-item>
            <!-- <el-form-item label="投产时间" prop="streamTime">
              <el-date-picker
                clearable
                :disabled="props.disabled"
                v-model="ruleForm.streamTime"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择投产时间"
              />
            </el-form-item> -->
            <el-form-item label="安装地点">
              <p-install-place
                v-model="ruleForm.installationLocation"
                :disabled="props.disabled"
              ></p-install-place>
            </el-form-item>
            <el-form-item label="使用部门">
              <el-tree-select
                :disabled="props.disabled"
                v-model="ruleForm.deviceDept"
                :data="deptData"
                node-key="id"
                value-key="id"
                :props="deptProp"
                :render-after-expand="false"
              />
            </el-form-item>

            <el-form-item label="展示顺序" prop="deviceSort">
              <el-input
                type="number"
                oninput="if(value<=0)value=''"
                :disabled="props.disabled"
                clearable
                v-model="ruleForm.deviceSort"
                placeholder="请填写顺序"
              />
            </el-form-item>
            <div class="rk">
              <el-form-item label="备注" prop="remark">
                <el-input
                  :disabled="props.disabled"
                  :rows="2"
                  type="textarea"
                  clearable
                  v-model="ruleForm.remark"
                  placeholder="请填写顺序"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="right">
          <el-form>
            <!-- 图片 -->
            <el-form-item label="设备照片" class="imgUpload">
              <ImageUpload
                :limit="1"
                v-model="ruleForm.fileImagePath"
                v-if="!props.disabled"
              />
              <p-imagePreview :src="ruleForm.fileImagePath" v-else />
            </el-form-item>
            <!-- 文件 -->
            <el-form-item label="文件附件">
              <p-fileUpload
                v-model="ruleForm.fileAttachmentPath"
                v-if="!props.disabled"
              />
              <p-downloadFile :fileList="ruleForm.fileAttachmentPath" v-else />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
.info {
  display: flex;
  .left {
    flex: 2;
  }
  .right {
    flex: 1;
    .imgUpload {
      margin-bottom: 50px;
    }
  }
}
.caozuo {
  display: flex;
  justify-content: space-evenly;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
